<template>
	<view>
		<!-- 顶部导航 -->
		<view class="topTabBar" :style="{position:headerPosition,top:headerTop}">
			<view class="grid" v-for="(grid,tbIndex) in orderType" :key="tbIndex" @tap="showType(tbIndex)">
				<view class="text" :class="[tbIndex==tabbarIndex?'on':'']">{{grid}}</view>
			</view>
		</view>
		<!-- 考虑非APP端长列表和复杂的DOM使用scroll-view会卡顿，所以漂浮顶部选项卡使用page本身的滑动 -->
		<view class="order-list">
			<view class="list">
				<view class="onorder" v-if="list.length == 0">
					<image src="/static/img/icon/noorder.png"></image>
					<view class="text">
						没有相关订单
					</view>
				</view>
				<view class="row" v-for="(row,index) in list" :key="index">
					<navigator url="/pages/sellerAdmin/order_show">
						<view class="seller_name"><span>订单编号：{{row.orederno}}</span></view>
						<view class="orederno">创建时间：{{row.order_time}}</view>
						<view class="type">{{typeText[row.type]}}</view>
						<view class="order-info">
							<view class="left">
								<image :src="row.img"></image>
							</view>
							<view class="right">
								<view class="name">
									{{row.name}}
								</view>
								<view class="spec">{{row.spec}}</view>
								<view class="price-number">
									￥<view class="price">{{row.price}}</view>
									x <view class="number">{{row.numner}}</view>
								</view>
							</view>
							
						</view>
						<view class="detail">
							<view class="number">共{{row.numner}}件商品</view><view class="sum">合计￥<view class="price">{{row.payment}}</view></view><view class="nominal">(含运费 ￥{{row.freight}})</view>
						</view>
						<view class="btns">
							<block v-if="row.type=='unpaid'"><view class="default">取消订单</view></block>
							<block v-if="row.type=='back'"><view class="pay">立即发货</view></block>
							<block v-if="row.type=='unreceived'"><view class="default">查看物流</view></block>
							<block v-if="row.type=='received'"><view class="default">评价</view></block>
							<block v-if="row.type=='completed'"></block>
							<block v-if="row.type=='refunds'"><view class="pay">用户退款</view></block>
						</view>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				headerPosition:"fixed",
				headerTop:"0px",
				typeText:{
					unpaid:'等待付款',
					back:'等待发货',
					unreceived:'已发货',
					received:'等待用户评价',
					completed:'交易已完成',
					refunds:'商品退货处理中'
				},
				orderType: ['全部','待付款','待发货','待收货','待评价','退换货'],
				//订单列表 演示数据
				orderList:[
					[
						{ type:"unpaid",ordersn:0,goods_id: 0, img: '/static/por5.jpg',order_time:'2019-04-12 23:30:57',orederno:'YMO_5cb0af3164f01', name: '商品名称商品名称商品名称商品名称商品名称', price: '168.00',payment:168.00,freight:12.00,spec:'规格:S码',numner:1 },
						{ type:"unpaid",ordersn:1,goods_id: 1, img: '/static/por6.jpg',order_time:'2019-04-12 23:30:57',orederno:'YMO_5cb0af3164f01', name: '商品名称商品名称商品名称商品名称商品名称', price: '168.00',payment:168.00,freight:12.00,spec:'规格:S码',numner:1 },
						{ type:"back",ordersn:1,goods_id: 1, img: '/static/por5.jpg',order_time:'2019-04-12 23:30:57',orederno:'YMO_5cb0af3164f01', name: '商品名称商品名称商品名称商品名称商品名称', price: '168.00',payment:168.00,freight:12.00,spec:'规格:S码',numner:1 },
						{ type:"unreceived",ordersn:1,goods_id: 1, img: '/static/por6.jpg',order_time:'2019-04-12 23:30:57',orederno:'YMO_5cb0af3164f01', name: '商品名称商品名称商品名称商品名称商品名称', price: '168.00',payment:168.00,freight:12.00,spec:'规格:S码',numner:1 },
						{ type:"received",ordersn:1,goods_id: 1, img: '/static/por5.jpg',order_time:'2019-04-12 23:30:57',orederno:'YMO_5cb0af3164f01', name: '商品名称商品名称商品名称商品名称商品名称', price: '168.00',payment:168.00,freight:12.00,spec:'规格:S码',numner:1 },
						{ type:"completed",ordersn:1,goods_id: 1, img: '/static/por6.jpg',order_time:'2019-04-12 23:30:57',orederno:'YMO_5cb0af3164f01', name: '商品名称商品名称商品名称商品名称商品名称', price: '168.00',payment:168.00,freight:12.00,spec:'规格:S码',numner:1 },
						{ type:"refunds",ordersn:1,goods_id: 1, img: '/static/por5.jpg',order_time:'2019-04-12 23:30:57',orederno:'YMO_5cb0af3164f01', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168',payment:168.00,freight:12.00,spec:'规格:S码',numner:1 }
					],
					[
						{ type:"unpaid",ordersn:0,goods_id: 0, img: '/static/por5.jpg',order_time:'2019-04-12 23:30:57',orederno:'YMO_5cb0af3164f01', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168',payment:168.00,freight:12.00,spec:'规格:S码',numner:1 },
						{ type:"unpaid",ordersn:1,goods_id: 1, img: '/static/por6.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168',payment:168.00,freight:12.00,spec:'规格:S码',numner:1 }
					],
					[
						//无
					],
					[
						{ type:"unreceived",ordersn:1,goods_id: 1, img: '/static/por5.jpg',order_time:'2019-04-12 23:30:57',orederno:'YMO_5cb0af3164f01', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168',payment:168.00,freight:12.00,spec:'规格:S码',numner:1 }
					],
					[
						{ type:"received",ordersn:1,goods_id: 1, img: '/static/por6.jpg',order_time:'2019-04-12 23:30:57',orederno:'YMO_5cb0af3164f01', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168',payment:168.00,freight:12.00,spec:'规格:S码',numner:1 }
					],
					[
						{ type:"refunds",ordersn:1,goods_id: 1, img: '/static/por5.jpg',order_time:'2019-04-12 23:30:57',orederno:'YMO_5cb0af3164f01', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168',payment:168.00,freight:12.00,spec:'规格:S码',numner:1 }
					]
					
				],
				list:[],
				tabbarIndex:0
			};
		},
		onLoad(option) {
			//option为object类型，会序列化上个页面传递的参数
			//console.log("option: " + JSON.stringify(option));
			//let tbIndex = parseInt(option.tbIndex)+1;
			this.list = this.orderList[0];
			this.tabbarIndex = 0;
			//兼容H5下排序栏位置
			// #ifdef H5
				this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight+'px';
			// #endif
		},
		onPageScroll(e){
			return;
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop>=0?"fixed":"absolute";
		},
		methods: {
			showType(tbIndex){
				this.tabbarIndex = tbIndex;
				this.list = this.orderList[tbIndex];
			}
		}
	}
</script>

<style lang="scss">
page{ background-color: #f4f4f4; }
.topTabBar{
	width:100%;
	position:fixed;
	top:0;
	z-index:10;
	background-color:#f8f8f8;
	height:80upx;
	display:flex;
	justify-content:space-around;
	.grid{
		width:20%;
		height:80upx;
		display:flex;
		justify-content:center;
		align-items:center;
		color:#444;
		font-size:$font-lg + 4upx;
		.text{
			height:76upx;
			display:flex;
			align-items:center;
			&.on{
				color:#8c0027;
				border-bottom:solid 4upx #8c0027;
			}
		}
		
	}
}
.order-list{
	margin-top:80upx; width:100%;
	
	.list{
		width:100%; height:auto; display:table;
		.onorder{
			width: 100%;
			height: 50vw;
			display: flex;
			justify-content: center;
			align-content: center;
			flex-wrap: wrap;
			
			image{ width:20vw; height:20vw; border-radius:100%; }
			.text{ width:100%; height:60upx; font-size:28upx; color:#444; display:flex; justify-content:center; align-items:center; }
		}
		.row{
			width:calc(100%); padding:10upx 20upx; background-color:#fff; margin-bottom:20upx; position:relative;
			.seller_name {
				width:100%; height:56upx; color:$font-color-333; overflow:hidden;
				span { display:block; float:left; font-size:$font-lg; line-height:66upx; }
			}
			.orederno { width:100%; height:65upx; font-size:$font-sm + 2upx; color:$font-color-999; border-bottom:1px solid #eeeeee; margin-bottom:20upx; }
			.type{ font-size:26upx; color:#ff0000; height:50upx; display:flex; align-items:center; position:absolute; top:20upx; right:20upx; }
			.order-info{
				width:100%;
				display:flex;
				.left{
					flex-shrink: 0;
					width: 25vw;
					height: 25vw;
					image{
						width: 25vw;
						height: 25vw;
						border-radius: 10upx;
					}
				}
				.right{
					width: 100%;
					margin-left: 10upx;
					position: relative;
					.name{
						width: 100%;
						font-size:28upx; line-height:34upx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
					.spec{ color:#a7a7a7; font-size:$font-sm + 4upx; padding-top:5upx; }
					.price-number{
						position: absolute;
						bottom: 0;
						width: 100%;
						display: flex;
						justify-content: flex-end;
						font-size:$font-base;
						color: #333;
						display: flex;
						align-items: flex-end;
						.price{
							font-size:$font-base;
							margin-right:5upx;
						}
						
					}
				}
			}
			.detail{
				display: flex;
				justify-content: flex-end;
				align-items: flex-end;
				height:50upx;
				font-size:26upx;
				.sum{
					padding:0 8upx; display:flex; color:#ff0000; align-items:flex-end;
					
					.price{ font-size:30upx; }
				}
				
			}
			.btns{
				height: 80upx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				view{
					min-width: 120upx;
					height: 50upx;
					padding: 0 20upx;
					border-radius: 50upx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28upx;
					margin-left: 20upx;
				}
				.default{ border:solid 1upx #ccc; color:#666; }
				.pay{ border:solid 1upx #ec652f; color:#ffffff; background:#ec652f; }
			}
		}
	}
}
</style>